﻿.fullscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: #BAD80A;
}

    .fullscreen .spinner {
        position:absolute;
        top:40%;
        left:calc(50% - 32px)
    }
    .spinnerIcon
    {
        position:absolute;
        height: 48px; 
        width: 48px; 
        background-image: url(../Images/icons.png);
        background-size: 144px auto;
        background-position: -48px -0px;
    }
    .spinnerIcon.sp1{top:0px;left:0px;-webkit-animation:spinA 3s ease-in-out infinite;animation:spinA 3s ease-in-out infinite}
    .spinnerIcon.sp2{top:0px;left:48px;-webkit-animation:spinB 3s ease-in-out infinite;animation:spinB 3s ease-in-out infinite}
    .spinnerIcon.sp3{top:48px;left:48px;-webkit-animation:spinC 3s ease-in-out infinite;animation:spinC 3s ease-in-out infinite}
    .spinnerIcon.sp4{top:48px;left:0px;-webkit-animation:spinD 3s ease-in-out infinite;animation:spinD 3s ease-in-out infinite}
    @-webkit-keyframes spinA{25%{-webkit-transform:translate3d(48px, 0, 0)}50%{-webkit-transform:translate3d(48px, 48px, 0)}75%{-webkit-transform:translate3d(0, 48px, 0)}}
    @-webkit-keyframes spinB{25%{-webkit-transform:translate3d(0, 48px, 0)}50%{-webkit-transform:translate3d(-48px, 48px, 0)}75%{-webkit-transform:translate3d(-48px, 0, 0)}}
    @-webkit-keyframes spinC{25%{-webkit-transform:translate3d(-48px, 0, 0)}50%{-webkit-transform:translate3d(-48px, -48px, 0)}75%{-webkit-transform:translate3d(0, -48px, 0)}}
    @-webkit-keyframes spinD{25%{-webkit-transform:translate3d(0, -48px, 0)}50%{-webkit-transform:translate3d(48px, -48px, 0)}75%{-webkit-transform:translate3d(48px, 0, 0)}}
    @keyframes spinA{25%{transform:translate3d(48px, 0, 0)}50%{transform:translate3d(48px, 48px, 0)}75%{transform:translate3d(0, 48px, 0)}}
    @keyframes spinB{25%{transform:translate3d(0, 48px, 0)}50%{transform:translate3d(-48px, 48px, 0)}75%{transform:translate3d(-48px, 0, 0)}}
    @keyframes spinC{25%{transform:translate3d(-48px, 0, 0)}50%{transform:translate3d(-48px, -48px, 0)}75%{transform:translate3d(0, -48px, 0)}}
    @keyframes spinD{25%{transform:translate3d(0, -48px, 0)}50%{transform:translate3d(48px, -48px, 0)}75%{transform:translate3d(48px, 0, 0)}}

#crmLogin {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 500;
    background-image: url(../Images/CRMBackground.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    #crmLogin .logo {
        background-image: url(../Images/DXDemos.png);
        height: 130px;
        width: 180px;
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -90px;
    }

    #crmLogin .loginContainer {
        position: absolute;
        width: 360px;
        left: 50%;
        margin-left: -180px;
        top: 180px;
    }

        #crmLogin .loginContainer .login {
            cursor: pointer;
            width: 360px;
            height: 64px;
            border: #BAD80A;
            background-color: #BAD80A;
            color: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 30px;
        }

        #crmLogin .loginContainer .login:hover {
            background-color: #adcb00;
        }

            #crmLogin .loginContainer .login .icon {
                top: 4px;
                position: absolute;
                width: 56px;
                height: 56px;
                image-rendering: -webkit-optimize-contrast;
                background-image: url(../Images/icons.png);
                background-size: 168px auto;
                background-position: -56px 0px;
            }

            #crmLogin .loginContainer .login .text {
                padding-left: 60px;
                padding-top: 10px;
            }



#crmNav {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 60px;
    background-color: #BAD80A;
    z-index: 200;
}

    #crmNav ul {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: 60px;
    }

    #crmNav li {
        cursor: pointer;
        background: url(../Images/CRMSprite.png);
        background-position-x: -60px;
        margin: 0px 0px 0px 0px;
        list-style-type: none;
        height: 60px;
        width: 60px;
        display: block;
        -webkit-box-sizing: content-box;
    }

    #crmNav .photo {
        display: inline-block;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        height: 50px;
        width: 50px;
        top: 5px;
        left: 5px;
        position: absolute;
    }

    .selected {
        background-position-x: 0px !important;
        background-color: #fff !important;
    }

.crmBody {
    position: absolute;
    left: 60px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 10px 10px 10px 10px;
}
    .crmBody h1 {
        margin-top: 0px;
        font-size: 28px;
    }

#crmNavDetail {
    background-position-y: 0px;
}

#crmNavContacts {
    background-position-y: -60px !important;
}

#crmNavInvoices {
    background-position-y: -120px !important;
}

#crmNavLocation {
    background-position-y: -180px !important;
}

#crmNavNotes {
    background-position-y: -240px !important;
}

#crmNavAttachments {
    background-position-y: -300px !important;
}

#crmSplash {
    position: absolute;
    z-index: 300;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #BAD80A;
    color: #fff;
}

    #crmSplash h2 {
        text-align: center;
        padding-top: 100px;
    }

#crmSplashTitle {
    display: none;
}

#crmAddNew {
    position: absolute;
    z-index: 300;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #fff;
    z-index: 400;
    display: none;
}

#divmap {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    
}

.btnAgave {
    background-color: #334654;
    color: #fff;
}

    .btnAgave:hover {
        background-color: #BAD80A;
        color: inherit;
    }
    .btnAgave:active {
        background-color: #BAD80A;
        color: inherit;
    }

.ulform {
    display: table; 
    list-style-type: none; 
    list-style: none;
    margin-left: 5px;
}

.liform {
    display: table; 
    list-style-type: none; 
    list-style: none;
    float: left;
    padding-bottom: 5px; 
    padding-right: 10px;
}

.label {
    font-size: 14px;
    color: #334654;
}

.content {
    font-size: 16px; 
    width: 280px; 
    border: 1px solid #334654; 
    padding: 2px;
}